$.get('static/data/geo.json').then(geo => {
    $.get('http://127.0.0.1:5000/geo').then(res => {
        echarts.registerMap('GZ', geo)
        const myChart = echarts.init(document.getElementById('geo'))
        const option = {
            title: {
                text: '广州房产各区数量',
                textStyle: {
                    color: '#000000'
                }
            },
            tooltip: {
                trigger: 'item'
            },
            visualMap: {
                min: 0,
                max: 600,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                }
            },
            series: [
                {
                    name: '房产数量',
                    type: 'map',
                    map: 'GZ',
                    data: res.data,
                }
            ]
        }
        myChart.setOption(option)
    })
})
$.get('http://127.0.0.1:5000/pie').then(res => {
    const myChart = echarts.init(document.getElementById('pie'))
    const option = {
        title: {
            text: '房屋各类型占比',
            left: 'center',
            textStyle: {
                color: '#000000'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '房屋类型占比',
                type: 'pie',
                radius: '50%',
                data: res.data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    myChart.setOption(option)
})

$.get('http://127.0.0.1:5000/word_cloud').then(res => {
    const myChart = echarts.init(document.getElementById('word_cloud'))
    const option = {
        tooltip: {},
        series: [{
            type: 'wordCloud',
            // shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
            shape: 'circle',
            // maskImage这个是可以自定义背景图片的，词云会按照图片的形状排布，所以有形状限制的时候，最好用背景图来实现，而且，这个背景图一定要放base64的，不然词云画不出来
            // maskImage: '',
            // 下面就是位置的配置
            left: 'center',
            top: 'center',
            width: '70%',
            height: '80%',
            right: null,
            bottom: null,
            // 词的大小，最小12px，最大60px，可以在这个范围调整词的大小
            sizeRange: [12, 60],
            // 每个词旋转的角度范围
            rotationRange: [-90, 90],
            rotationStep: 45,
            // 词间距，数值越小，间距越小，这里间距太小的话，会出现大词把小词套住的情况，比如一个大的口字，中间会有比较大的空隙，这时候他会把一些很小的字放在口字里面，这样的话，鼠标就无法选中里面的那个小字
            gridSize: 8,
            // 允许词太大的时候，超出画布的范围
            drawOutOfBound: false,
            // 布局的时候是否有动画
            layoutAnimation: true,
            // 这是全局的文字样式，相对应的还可以对每个词设置字体样式
            textStyle: {
                fontFamily: 'sans-serif',
                fontWeight: 'bold',
                // 颜色可以用一个函数来返回字符串
                color: function () {
                    // Random color
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            emphasis: {
                focus: 'self',
                textStyle: {
                    textShadowBlur: 10,
                    textShadowColor: '#333'
                }
            },

            // 数据必须是一个数组，数组是对象，对象必须有name和value属性
            data: res.data
        }]
    }
    myChart.setOption(option)
})

$.get('http://127.0.0.1:5000/heatmap').then(res => {
    const myChart = echarts.init(document.getElementById('heatmap'))
    const option = {
        title: {
            text: '不同单价各地区的房屋数量热力图',
            left: 'center',
            textStyle: {
                color: '#000000'
            }
        },
        grid: {
            height: '50%',
            top: '10%',
            left: '20%'
        },
        xAxis: {
            type: 'category',
            data: res.region_list,
            splitArea: {
                show: true
            },
            axisLabel: {
                rotate: 90,
                color: '#000000'
            },
            axisLine: {
                lineStyle: {
                    color: '#000000'
                }
            }
        },
        yAxis: {
            type: 'category',
            data: res.price_list,
            splitArea: {
                show: true
            },
            axisLabel: {
                color: '#000000'
            },
            axisLine: {
                lineStyle: {
                    color: '#000000'
                }
            }
        },
        visualMap: {
            min: 0,
            max: 50,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '15%'
        },
        series: [
            {
                name: '数量',
                type: 'heatmap',
                data: res.data.map(value => [value[1], value[0], value[2] || '-']),
                label: {
                    show: true
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    myChart.setOption(option)
})

$.get('http://127.0.0.1:5000/scatter').then(res => {
    const myChart = echarts.init(document.getElementById('scatter'))
    const option = {
        title: {
            text: '房屋面积与总价散点图',
            left: 'center',
            textStyle: {
                color: '#000000'
            }
        },
        legend: {
            bottom: 5,
            textStyle: {
                color: '#000000'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        xAxis: {
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisLabel: {
                color: '#000000'
            },
            axisLine: {
                lineStyle: {
                    color: '#000000'
                }
            }
        },
        yAxis: {
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisLabel: {
                color: '#000000'
            },
            axisLine: {
                lineStyle: {
                    color: '#000000'
                }
            }
        },
        series: [
            {
                name: '面积',
                type: 'scatter',
                data: res.data,
                symbolSize: 10,
            },
            {
                name: 'line',
                type: 'line',
                data: res.line,
                symbolSize: 0.1,
                symbol: 'circle',
                encode: {label: 2, tooltip: 1}
            }
        ]
    }
    myChart.setOption(option)
})

$.get('http://127.0.0.1:5000/bar').then(res => {
    const myChart = echarts.init(document.getElementById('bar'))
    const option = {
        title: {
            text: '房屋各房型数量',
            left: 'center',
            textStyle: {
                color: '#000000'
            }

        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: res.name,
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    color: '#000000'
                },
                axisLine: {
                    lineStyle: {
                        color: '#000000'
                    }
                }

            }
        ],
        yAxis: [
            {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        color: '#000000'
                    }
                },
                axisLabel: {
                    color: '#000000'
                },
                axisLine: {
                    lineStyle: {
                        color: '#000000'
                    }
                }
            }
        ],
        series: [
            {
                name: '数量',
                type: 'bar',
                barWidth: '60%',
                data: res.value
            }
        ]
    }
    myChart.setOption(option)
})